<!DOCTYPE html>
<html lang="zn-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>离线笔记应用</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" id="app">

 <div class="row center">
 		<h1>离线笔记应用</h1>
 	</div>	
 <div class="row center">
 		<p>注意：本笔记只保存在浏览器中，若你清除了浏览器的缓存，则笔记数据会丢失！</p>
 </div>	

<div class="row pb">
	<div class="col-md-4 col-xs-6">
		<button class="btn btn-default mr" @click="show()">添 加</button>	
		<button class="btn btn-info mr" @click="admin()">管理</button>
		<button class="btn btn-success" @click="down()">备份</button>
	</div>
	<div class="col-md-2 col-xs-6">   
    		<input type="button" class="btn btn-danger" value="清除所有" @click="clear()">
    </div>

    <div class="col-md-6 col-xs-12" style="line-height:3rem; ">
       可用空间：
    	<progress :value="size" max="2048"></progress>
    	({{size+"/"+2048}})
    </div>
    
</div>

 <div class="row" v-show="status">
 <div class="col-md-12">
 <form role="form">
  <div class="form-group">
    <label >标题</label>
    <input type="text" class="form-control" placeholder="标题必填" v-model="f.title">
  </div>

  <div class="form-group">
    <label>笔记内容</label>
    <textarea class="form-control content" placeholder="笔记内容，必填" v-model="f.content"></textarea>
  </div>
 
  <div class="form-group">
    <label>标签</label>
    <input type="text" class="form-control" v-model="f.tag">
  </div>

   <input type="button" class="btn btn-success" value="确 定" @click="sub()">
   <input type="button" class="btn btn-danger" value="清 除" @click="reset()">
</form>
</div>
 </div>

<div class="row" style="padding-top: 2rem;">
	<div class="col-md-12">
		<ul class="list-group">
			<li class="list-group-item" v-for="(v,i) in list">
			<span class="badge">{{v.time|mytime}}</span>
			<h4 class="list-group-item-heading" @click="showp(v)">
            {{v.title}}
             <button class="btn btn-info" v-show="ed" @click="edit(v)">编辑</button>
             <button class="btn btn-danger" v-show="ed" @click="del(i)">删除</button>
            </h4>
            
			<p class="list-group-item-text" v-show="v.status==1">
            {{v.content}}
            <span class="tag">{{v.tag}}</span>
            </p>

			</li>
		</ul>
	</div>
</div>

</div>	
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<script>
//可以考虑添加一个导出与导入的功能

if(!window.localStorage){alert("你的浏览器不能使用该应用");}


new Vue({
	el:"#app",
	data:{
		f:{title:"",content:"",tag:"",time:"",status:""},
		status:0,
		list:[],
		size:0,
		ed:"",
	},
	created:function(){
		this.getlist();
		var size=this.getsize();
		this.size=size>0?size.toFixed(2):0;
	},
	filters:{
		mytime:function(d){
          var time=new Date(d);
          var m=time.getMonth()+1;
          var d=time.getDate();
          var h=time.getHours();
          var min=time.getMinutes();
          return m+"-"+d+" "+h+":"+min;
		}
	},
	methods:{
		show:function(){
         this.status=this.status==0?1:0;
		},
		save:function(tem){
			localStorage.list=JSON.stringify(this.list);
			this.size=this.getsize().toFixed(2);
		},
		sub:function(){
			if(!this.f.title){alert("标题不能为空");return;}
			if(!this.f.content){alert("内容不能为空");return;}
			if(this.f.time){this.subedit();return false;}else{
				this.f.time=new Date().getTime();
				var tem=this.clone(this.f);
				this.list.unshift(tem);
				this.save();
				this.reset();
				this.status=0;	
			}
		},
		subedit:function(){
		  var num=0;
		  for(var i in this.list){
		  	 if(this.f.time==this.list[i]['time']){num=i;}
		  	 this.list[i]['status']="";
		  }
		  this.f.time=new Date().getTime();
	  	  this.list.splice(num,1,this.clone(this.f));
		  this.save();
		  this.status=0;
		  this.reset();
		  this.ed="";
		},
		getlist:function(){
		  var list=localStorage.list||"";
          this.list=list?JSON.parse(list):[];
		},
		clone:function(obj){
			var re={};
			for(var i in obj){
				re[i]=obj[i];
			}
			return re;
		},
		clear:function(){
			if(!confirm("清除数据后，所有笔记的内容都将被删除，确定清除吗？")){return false;}
			localStorage.clear();
			this.list=[];
		},
		getsize:function(){
			var size=0;
			var tem=localStorage;
			if(!tem){return 0;}
			for(var i in tem){
				size+=tem[i].length>0?tem[i].length:0;
			}
			return size/1024;
		},
		showp:function(v){
			v.status=v.status?"":1;
			console.log(v);
		},
		admin:function(){
			this.ed=this.ed?"":1;
		},
		del:function(i){
			if(!confirm("确定要删除吗？")){return false;}
			this.list.splice(i,1);
			this.save();
		},
		edit:function(v){
			this.status=1;
			v.status="";
			this.f=this.clone(v);
		},
		reset:function(){
		  for(var i in this.f){
		  	 this.f[i]="";
		  }
		},
		get_date:function(){
          var d=new Date();
          return d.getFullYear()+"_"+(d.getMonth()+1)+"_"+d.getDate();
		},
		down:function(){
          this.Download(JSON.stringify(this.list),"读点离线笔记备份_"+this.get_date()+".txt");
		},
		Download:function (content, filename) {
			// 创建隐藏的可下载链接
			var eleLink = document.createElement('a');
			eleLink.download = filename;
			eleLink.style.display = 'none';
			// 字符内容转变成blob地址
			var blob = new Blob([content]);
			eleLink.href = URL.createObjectURL(blob);
			// 触发点击
			document.body.appendChild(eleLink);
			eleLink.click();
			// 然后移除
			document.body.removeChild(eleLink);
		}
	}
})	
</script>